---
title: Tailwind CSS Radio for React - Material Tailwind
description: Customise your web projects with our easy-to-use radio component for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "radio-button",
    "radio-button-colors",
    "radio-button-custom-icon",
    "radio-button-ripple-effect",
    "radio-button-disabled",
    "radio-button-with-link",
    "radio-button-with-description",
    "radio-button-vertical-list-group",
    "radio-button-horizontal-list-group",
    "radio-button-custom-styles",
    "radio-button-props",
    "types-color",
    "radio-button-theme",
    "radio-button-theme-object-type",
    "radio-button-theme-customization",
    "more-examples"
  ]
github: radio-button
prev: pagination
next: rating-bar
---

<DocsTitle href="radio-button">
# Tailwind CSS Radio Button - React
</DocsTitle>

Our Tailwind CSS radio button component will let your users choose only one of a predefined set of mutually exclusive options. <Code>Radio</Code> buttons should be used instead of checkboxes if only one item can be selected from a list.

Use the following example to create simple <Code>Radio</Code> buttons for your projects.

<br />

<CodePreview link="radio-button#radio-button" component={<RadioExamples.RadioDefault />}>
```jsx
import { Radio } from "@material-tailwind/react";

export function RadioDefault() {
  return (
    <div className="flex gap-10">
      <Radio name="type" label="HTML" />
      <Radio name="type" label="React" defaultChecked />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-colors">
## Radio Button Colors
</DocsTitle>

The <Code>Radio</Code> component comes with 19 different colors that you can change it using the <Code>color</Code> prop.

<CodePreview link="radio-button#radio-button-colors" component={<RadioExamples.RadioColors />}>
```jsx
import { Radio } from "@material-tailwind/react";

export function RadioColors() {
  return (
    <div className="flex w-max gap-4">
      <Radio name="color" />
      <Radio name="color" color="gray" defaultChecked />
      <Radio name="color" color="blue" />
      <Radio name="color" color="green" />
      <Radio name="color" color="red" />
      <Radio name="color" color="amber" />
      <Radio name="color" disabled color="purple" />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-custom-icon">
## Radio Button Custom Icon
</DocsTitle>

You can add a custom icon for the <Code>Radio</Code> button component when it's checked by passing the <Code>icon</Code> prop to the <Code>Radio</Code> button component.

<CodePreview id="radio-button-custom-icon" component={<RadioExamples.RadioCustomIcon />}>
```jsx
import { Radio } from "@material-tailwind/react";

export function RadioCustomIcon() {
  return (
    <>
      <Radio
        name="type"
        label="React"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-3 w-3"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fillRule="evenodd"
              d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
              clipRule="evenodd"
            />
          </svg>
        }
      />
      <Radio
        name="type"
        label="React"
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-3 w-3"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fillRule="evenodd"
              d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
              clipRule="evenodd"
            />
          </svg>
        }
        defaultChecked
      />
    </>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-ripple-effect">
## Radio Button Ripple Effect
</DocsTitle>

You can turn on/off the ripple effect for the <Code>Radio</Code> button component using the <Code>ripple</Code> prop.

<CodePreview link="radio-button#radio-button-ripple-effect" component={<RadioExamples.RadioRippleEffect />}>
```jsx
import { Radio } from "@material-tailwind/react";

export function RadioRippleEffect() {
  return (
    <div className="flex gap-10">
      <Radio name="type" label="Ripple Effect On" ripple={true} />
      <Radio name="type" label="Ripple Effect Off" ripple={false} />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-disabled">
## Radio Button Disabled
</DocsTitle>

You can make a radio button disable by passing the <Code>disabled</Code> prop to the <Code>Radio</Code> component.

<CodePreview component={<RadioExamples.RadioDisabled />}>
```jsx
import { Radio } from "@material-tailwind/react";

export function RadioDisabled() {
  return (
    <div className="flex gap-10">
      <Radio name="type" label="HTML" disabled />
      <Radio name="type" label="React" disabled defaultChecked />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-with-link">
## Radio Button with Link
</DocsTitle>

The <Code>label</Code> prop for the the radio button can accept dom elements and because of that you can put links or any other dom elements you like to have with your radio button label.

<CodePreview component={<RadioExamples.RadioWithLink />}>
```jsx
import { Radio, Typography } from "@material-tailwind/react";

export function RadioWithLink() {
  return (
   <div className="flex flex-col gap-2">
      <Radio
        name="terms"
        label={
          <Typography
            color="blue-gray"
            className="flex font-medium text-blue-gray-500"
          >
            I agree with HTML
            <Typography
              as="a"
              href="#"
              color="blue-gray"
              className="hover:text-blueg-gray-900 font-medium transition-colors"
            >
              &nbsp;terms and conditions
            </Typography>
            .
          </Typography>
        }
      />
      <Radio
        name="terms"
        label={
          <Typography
            color="blue-gray"
            className="flex font-medium text-blue-gray-500"
          >
            I agree with HTML
            <Typography
              as="a"
              href="#"
              color="blue-gray"
              className="hover:text-blueg-gray-900 font-medium transition-colors"
            >
              &nbsp;terms and conditions
            </Typography>
            .
          </Typography>
        }
      />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-with-description">
## Radio Button with Description
</DocsTitle>

Use the example below for a more complex usage of radio button with label that contains some description.

<CodePreview component={<RadioExamples.RadioWithDescription />}>
```jsx
import { Radio, Typography } from "@material-tailwind/react";

export function RadioWithDescription() {
  return (
    <div className="flex flex-col gap-8">
      <Radio
        name="description"
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              HTML Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/html, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
      <Radio
        name="description"
        defaultChecked
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              React Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/react, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
      <Radio
        name="description"
        color="blue"
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              React Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/react, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
      <Radio
        name="description"
        color="green"
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              React Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/react, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
      <Radio
        name="description"
        color="red"
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              React Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/react, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
      <Radio
        name="description"
        color="amber"
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              React Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/react, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
      <Radio
        name="description"
        disabled
        label={
          <div>
            <Typography color="blue-gray" className="font-medium">
              React Version
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              @material-tailwind/react, packed with rich components and widgets.
            </Typography>
          </div>
        }
        containerProps={{
          className: "-mt-5",
        }}
      />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-vertical-list-group">
## Radio Button Vertical List Group
</DocsTitle>

Use the example below for a vertical list of radio buttons.

<CodePreview component={<RadioExamples.RadioVerticalList />}>
```jsx
import {
  Radio,
  Card,
  List,
  ListItem,
  ListItemPrefix,
  Typography,
} from "@material-tailwind/react";

export function RadioVerticalList() {
  return (
    <Card>
      <List>
        <ListItem className="p-0">
          <label
            htmlFor="vertical-list-react"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <ListItemPrefix className="mr-3">
              <Radio
                name="vertical-list"
                id="vertical-list-react"
                ripple={false}
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0",
                }}
              />
            </ListItemPrefix>
            <Typography
              color="blue-gray"
              className="font-medium text-blue-gray-400"
            >
              React.js
            </Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label
            htmlFor="vertical-list-vue"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <ListItemPrefix className="mr-3">
              <Radio
                name="vertical-list"
                id="vertical-list-vue"
                ripple={false}
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0",
                }}
              />
            </ListItemPrefix>
            <Typography
              color="blue-gray"
              className="font-medium text-blue-gray-400"
            >
              Vue.js
            </Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label
            htmlFor="vertical-list-svelte"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <ListItemPrefix className="mr-3">
              <Radio
                name="vertical-list"
                id="vertical-list-svelte"
                ripple={false}
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0",
                }}
              />
            </ListItemPrefix>
            <Typography
              color="blue-gray"
              className="font-medium text-blue-gray-400"
            >
              Svelte.js
            </Typography>
          </label>
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-horizontal-list-group">
## Radio Button Horizontal List Group
</DocsTitle>

Use the example below for a horizontal list of radio buttons.

<CodePreview component={<RadioExamples.RadioHorizontalList />}>
```jsx
import {
  Radio,
  Card,
  List,
  ListItem,
  ListItemPrefix,
  Typography,
} from "@material-tailwind/react";

export function RadioHorizontalList() {
  return (
    <Card className="w-full max-w-[24rem]">
      <List className="flex-row">
        <ListItem className="p-0">
          <label
            htmlFor="horizontal-list-react"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <ListItemPrefix className="mr-3">
              <Radio
                name="horizontal-list"
                id="horizontal-list-react"
                ripple={false}
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0",
                }}
              />
            </ListItemPrefix>
            <Typography
              color="blue-gray"
              className="font-medium text-blue-gray-400"
            >
              React.js
            </Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label
            htmlFor="horizontal-list-vue"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <ListItemPrefix className="mr-3">
              <Radio
                name="horizontal-list"
                id="horizontal-list-vue"
                ripple={false}
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0",
                }}
              />
            </ListItemPrefix>
            <Typography
              color="blue-gray"
              className="font-medium text-blue-gray-400"
            >
              Vue.js
            </Typography>
          </label>
        </ListItem>
        <ListItem className="p-0">
          <label
            htmlFor="horizontal-list-svelte"
            className="flex w-full cursor-pointer items-center px-3 py-2"
          >
            <ListItemPrefix className="mr-3">
              <Radio
                name="horizontal-list"
                id="horizontal-list-svelte"
                ripple={false}
                className="hover:before:opacity-0"
                containerProps={{
                  className: "p-0",
                }}
              />
            </ListItemPrefix>
            <Typography
              color="blue-gray"
              className="font-medium text-blue-gray-400"
            >
              Svelte.js
            </Typography>
          </label>
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-custom-styles">
## Radio Button Custom Styles
</DocsTitle>

You can use the <Code>className</Code> prop to add custom styles to the <Code>Radio</Code> component.

<CodePreview component={<RadioExamples.RadioCustomStyles />}>
```jsx
import { Radio, Typography } from "@material-tailwind/react";

function Icon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-full w-full scale-105"
    >
      <path
        fillRule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
        clipRule="evenodd"
      />
    </svg>
  );
}

export function RadioCustomStyles() {
  return (
    <div className="flex gap-10">
      <Radio
        name="type"
        ripple={false}
        icon={<Icon />}
        className="border-gray-900/10 bg-gray-900/5 p-0 transition-all hover:before:opacity-0"
        label={
          <Typography
            color="blue-gray"
            className="font-normal text-blue-gray-400"
          >
            React
          </Typography>
        }
      />
      <Radio
        name="type"
        defaultChecked
        ripple={false}
        icon={<Icon />}
        className="border-gray-900/10 bg-gray-900/5 p-0 transition-all hover:before:opacity-0"
        label={
          <Typography
            color="blue-gray"
            className="font-normal text-blue-gray-400"
          >
            React
          </Typography>
        }
      />
    </div>
  );
}
```
</CodePreview>

---

<DocsTitle href="radio-button-props">
## Radio Button Props
</DocsTitle>

The following props are available for radio button component. These are the custom
props that we've added for the radio button component and you can use all the other
native input props as well.

| Attribute        | Type                  | Description                                   | Default                |
| ---------------- | --------------------- | --------------------------------------------- | ---------------------- |
| `color`          | [Color](#types-color) | Change radio button color                     | <Code>gray</Code>      |
| `label`          | <Code>node</Code>     | Add label for radio button                    | <Code>undefined</Code> |
| `icon`           | <Code>node</Code>     | Change checked icon for radio button          | <Code>undefined</Code> |
| `ripple`         | <Code>boolean</Code>  | Add ripple effect for radio button            | <Code>true</Code>      |
| `className`      | <Code>string</Code>   | Add custom className for radio button         | `''`                   |
| `disabled`       | <Code>boolean</Code>  | Makes the radio button disabled               | <Code>false</Code>     |
| `containerProps` | <Code>object</Code>   | Add custom props for radio button container   | <Code>undefined</Code> |
| `labelProps`     | <Code>object</Code>   | Add custom props for radio button label       | <Code>undefined</Code> |
| `iconProps`      | <Code>object</Code>   | Add custom props for radio button icon        | <Code>undefined</Code> |
| `inputRef`       | <Code>ref</Code>      | Add reference for <Code>input</Code> element. | <Code>undefined</Code> |

<br />
<br />

### For TypeScript Only

```tsx
import type { RadioProps } from "@material-tailwind/react";
```

---

<DocsTitle href="types-color">
## Types - Color
</DocsTitle>

```ts
type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";
```

---

<DocsTitle href="radio-button-theme">
## Radio Button Theme
</DocsTitle>

Learn how to customize the theme and styles for radio button component, the theme object for radio button component has three main objects:

**A.** The <Code>defaultProps</Code> object for setting up the default value for props of radio button component.<br />
**B.** The <Code>valid</Code> object for customizing the valid values for radio button component props.<br />
**C.** The <Code>styles</Code> object for customizing the theme and styles of radio button component.<br />

You can customize the theme and styles of radio button component by adding Tailwind CSS classes as key paired values for objects.

<br />
<br />

<DocsTitle href="radio-button-theme-object-type">
## Radio Button Theme Object Type
</DocsTitle>

```ts
interface RadioStylesType {
  defaultProps: {
    color: string;
    label: string;
    icon: node;
    ripple: boolean;
    className: string;
    disabled: boolean;
    containerProps: object;
    labelProps: object;
    iconProps: object;
  };
  valid: {
    colors: string[];
  };
  styles: {
    base: {
      root: object;
      container: object;
      input: object;
      label: object;
      icon: object;
      disabled: object;
    };
    colors: object;
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import type { RadioStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="radio-button-theme-customization">
## Radio Button Theme Customization
</DocsTitle>

```ts
const theme = {
  radio: {
    defaultProps: {
      color: "blue",
      label: undefined,
      icon: undefined,
      ripple: true,
      className: "",
      disabled: false,
      containerProps: undefined,
      labelProps: undefined,
      iconProps: undefined,
    },
    valid: {
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        root: {
          display: "inline-flex",
          alignItems: "items-center",
        },
        container: {
          position: "relative",
          display: "flex",
          alignItems: "items-center",
          cursor: "cursor-pointer",
          p: "p-3",
          borderRadius: "rounded-full",
        },
        input: {
          peer: "peer",
          position: "relative",
          appearance: "appearance-none",
          width: "w-5",
          height: "h-5",
          borderWidth: "border",
          borderRadius: "rounded-full",
          borderColor: "border-blue-gray-200",
          cursor: "cursor-pointer",
          transition: "transition-all",
          before: {
            content: "before:content['']",
            display: "before:block",
            bg: "before:bg-blue-gray-500",
            width: "before:w-12",
            height: "before:h-12",
            borderRadius: "before:rounded-full",
            position: "before:absolute",
            top: "before:top-2/4",
            left: "before:left-2/4",
            transform: "before:-translate-y-2/4 before:-translate-x-2/4",
            opacity: "before:opacity-0 hover:before:opacity-10",
            transition: "before:transition-opacity",
          },
        },
        label: {
          color: "text-gray-700",
          fontWeight: "font-light",
          userSelect: "select-none",
          cursor: "cursor-pointer",
          mt: "mt-px",
        },
        icon: {
          position: "absolute",
          top: "top-2/4",
          left: "left-2/4",
          translate: "-translate-y-2/4 -translate-x-2/4",
          pointerEvents: "pointer-events-none",
          opacity: "opacity-0 peer-checked:opacity-100",
          transition: "transition-opacity",
        },
        disabled: {
          opacity: "opacity-50",
          pointerEvents: "pointer-events-none",
        },
      },
      colors: {
        "blue-gray": {
          color: "text-blue-gray-500",
          border: "checked:border-blue-gray-500",
          before: "checked:before:bg-blue-gray-500",
        },
        gray: {
          color: "text-gray-500",
          border: "checked:border-gray-500",
          before: "checked:before:bg-gray-500",
        },
        brown: {
          color: "text-brown-500",
          border: "checked:border-brown-500",
          before: "checked:before:bg-brown-500",
        },
        "deep-orange": {
          color: "text-deep-orange-500",
          border: "checked:border-deep-orange-500",
          before: "checked:before:bg-deep-orange-500",
        },
        orange: {
          color: "text-orange-500",
          border: "checked:border-orange-500",
          before: "checked:before:bg-orange-500",
        },
        amber: {
          color: "text-amber-500",
          border: "checked:border-amber-500",
          before: "checked:before:bg-amber-500",
        },
        yellow: {
          color: "text-yellow-500",
          border: "checked:border-yellow-500",
          before: "checked:before:bg-yellow-500",
        },
        lime: {
          color: "text-lime-500",
          border: "checked:border-lime-500",
          before: "checked:before:bg-lime-500",
        },
        "light-green": {
          color: "text-light-green-500",
          border: "checked:border-light-green-500",
          before: "checked:before:bg-light-green-500",
        },
        green: {
          color: "text-green-500",
          border: "checked:border-green-500",
          before: "checked:before:bg-green-500",
        },
        teal: {
          color: "text-teal-500",
          border: "checked:border-teal-500",
          before: "checked:before:bg-teal-500",
        },
        cyan: {
          color: "text-cyan-500",
          border: "checked:border-cyan-500",
          before: "checked:before:bg-cyan-500",
        },
        "light-blue": {
          color: "text-light-blue-500",
          border: "checked:border-light-blue-500",
          before: "checked:before:bg-light-blue-500",
        },
        blue: {
          color: "text-blue-500",
          border: "checked:border-blue-500",
          before: "checked:before:bg-blue-500",
        },
        indigo: {
          color: "text-indigo-500",
          border: "checked:border-indigo-500",
          before: "checked:before:bg-indigo-500",
        },
        "deep-purple": {
          color: "text-deep-purple-500",
          border: "checked:border-deep-purple-500",
          before: "checked:before:bg-deep-purple-500",
        },
        purple: {
          color: "text-purple-500",
          border: "checked:border-purple-500",
          before: "checked:before:bg-purple-500",
        },
        pink: {
          color: "text-pink-500",
          border: "checked:border-pink-500",
          before: "checked:before:bg-pink-500",
        },
        red: {
          color: "text-red-500",
          border: "checked:border-red-500",
          before: "checked:before:bg-red-500",
        },
      },
    },
  },
};
```

---

<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>

Looking for more radio button examples? Check out our **<a href="https://www.material-tailwind.com/blocks/contact-sections" target="_blank">Contact Sections</a>** from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.
